<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="会员设置" name="first">
          <el-table :data="memberdata" style="width: 98%;margin: 10px auto 0" border
              v-loading="loading1"
              element-loading-text="拼命加载中....">

            <el-table-column label="会员有效期(天)" align="center" prop="validity_period">
              
            </el-table-column>

            <el-table-column label="原价(元)" align="center" prop="price">
              
            </el-table-column>

            <el-table-column label="特惠价(支付价)" align="center" prop="discount_price">
              
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
                <!-- <edit :row_id="Number(row.id)"></edit> -->
              </template>
            </el-table-column>
            
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="会员介绍" name="second">
          <el-table :data="memberintroduce" style="width: 98%;margin: 10px auto 0" border
              v-loading="loading2"
              element-loading-text="拼命加载中....">

            <el-table-column label="封面" align="center">
                <template slot-scope="{row}">
                  <img :src="row.head_img" width="100px"/>
                </template>
            </el-table-column>

            <el-table-column label="介绍" align="center">
                <template slot-scope="{row}">
                  <span>{{row.detail}}</span>
                </template>
            </el-table-column>

            <el-table-column label="编辑" align="center">
              <template slot-scope="{row}">
                <el-button size="mini" type="primary" @click="handleRedact(row)">编辑</el-button>
              </template>
                <!-- <edit :row_id="Number(row.id)"></edit> -->
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <transition name="el-zoom-in-top">
        <div v-show="bigImageSrc !== null && bigImageSrc!==''" class="bigImg" @click="bigImage(null)">
          <img :src="bigImageSrc" style="width:auto; height:400px;border-radius:5px;">
        </div>
      </transition>
    <edit ref="showEditDialog"/>
    <introduce ref="showIntroduceDialog"/>
  </div>
</template>
<script>
import {getList,getmemberintroduce} from '@/api/thk/cms/member'
import store from '@/store'
import edit from './edit'
import introduce from './introduce'
import request from '@/utils/request'
export default {
  components:{
    edit,
    introduce
  },
  data(){
    return{
      formLabelWidth: '130px',
      activeName:'first',
      loading1:false,
      loading2:false,
      memberintroduce:[{
        head_img:'',
        detail:''
      }
      ],
      memberdata:[
        {
          validity_period:'',
          price:'',
          discount_price:''
        }
      ],
      listData: {},
      total:undefined,
      bigImageSrc: null
    }
  },
  methods:{
    bigImage(src) {
      if (src!==null) {
        this.$set(this, 'bigImageSrc', src)
        console.log(this.bigImageSrc)
      } else {
        this.$set(this, 'bigImageSrc', null)
      }
    },
    handleEdit(row){
      console.log('handleEdit',row)
      this.$refs.showEditDialog.showEditDialog(row)
    },
    handleRedact(row){
      this.$refs.showIntroduceDialog.showIntroduceDialog(row)
    },
    getmemberList(){
        getList(this.$store.getters.token).then(res =>{
          this.memberdata = res.data.list.data
        },error => {
          console.log(error)
        })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    getmemberintroduce(){
      getmemberintroduce(store.getters.token).then(res=>{
        this.memberintroduce[0].head_img=res.data.data.head_img
        this.memberintroduce[0].detail=res.data.data.detail
        // console.log(res.data.data,"777")
      })
    }
  },
  created(){
    this.getmemberList()
    this.getmemberintroduce()
  },
  updated(){
    // this.getmemberList()
    this.getmemberintroduce()
  }
}
</script>
<style>

</style>